<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="{{ theme.primary_color }}">
    <meta name="zine-version" content="{{ zine_version }}"/>
    {% include "_meta.jinja" -%}
    <link rel="icon" type="image/png" href="/favicon.ico">
    {% if theme.head_template -%}
    {% include "head_template.jinja" -%}
    {% endif -%}
    <link rel="stylesheet" href="/static/zine.css">
    <link rel="alternate" type="application/atom+xml" title="{{ site.name }} RSS" href="/feed.xml">
    <style>
    :root {
        --primary-color: {{ theme.primary_color }};
        --main-color: {{ theme.main_color }};
        --link-color: {{ theme.link_color }};
        --secondary-color: {{ theme.secondary_color }};
    }
    </style>
</head>

<body class="h-full bg-secondary">
    {% if theme.background_image -%}
    <div class="zine-header bg-primary text-main font-bold text-center z-0"
        style="background-image: url('{{ theme.background_image }}')">
    {% else -%}
    <div class="zine-header bg-primary text-main font-bold text-center z-0">
    {% endif -%}
        <header class="p-8 md:p-10">
            <div class="zine-brand text-4xl lg:text-5xl">
                <a href="/">{{ site.name }}</a>
            </div>
            <ul class="zine-menu">
                {% for menu in site.menus -%}
                <li class="inline-block mt-6 mx-5 text-base hover:underline">
                    <a href="{{ menu.url }}">{{ menu.name }}</a>
                </li>
                {% endfor -%}
            </ul>
        </header>
        <div class="zine-space w-full h-32 md:h-36 lg:h-44 xl:h-48 2xl:h-56"></div>
    </div>
    <main
        class="pb-10 -translate-y-32 lg:-translate-y-36 xl:-translate-y-44 2xl:-translate-y-56 mx-auto sm:max-w-scree-md md:max-w-screen-lg">
        {% block content -%}
        {% endblock content -%}
    </main>
    <footer class="relative">
        {% if theme.footer_template -%}
        {% include "footer_template.jinja" -%}
        {% else -%}
        <div class="bg-black text-white text-center p-16">
            <div>
                <a class="hover:underline" href="https://github.com/zineland/zine">Zine</a>
                - a simple and opinionated tool to build your own magazine.
            </div>
        </div>
        {% endif -%}
        <a href="https://github.com/zineland"
            class="absolute z-20 bottom-0 w-full text-center font-bold md:text-slate-100 md:opacity-10 md:hover:opacity-50 md:bg-transparent bg-primary p-2 text-main">
            Proudly powered by Zine.
        </a>
    </footer>
</body>
<script src="/static/medium-zoom.min.js"></script>
<script src="/static/zine.js"></script>
{% if live_reload -%}
<script>
    const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
    const wsAddress = wsProtocol + "//" + location.host + "/live_reload";
    const socket = new WebSocket(wsAddress);
    socket.onopen = function () {
        console.log("[open] Live reload connection established");
    };
    socket.onmessage = function (event) {
        if (event.data === "reload") {
            socket.close();
            location.reload();
        }
    };
    socket.onclose = function(event) {
        console.log("[close] Live reload connection closed");
    };
    window.onbeforeunload = function() {
        socket.close();
    }
</script>
{% endif -%}
</html>